<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../layui/css/layui.css">
		<script src="../js/jquery-1.12.4.js"></script>
		<script src="../js/ajaxfileupload.js"></script>
		<script src="../js/echarts.js"></script>
		<script src="../js/china.js"></script>
		<script src="../layui/layui.all.js"  charset="utf-8"></script>
		<style type="text/css">
			.layui-table-cell {
				height: auto;
				line-height: 28px;
			}
		</style>

 	</head>
	<body class="layui-layout-login">
	<div id="test1" style="width: 600px;height: 400px"></div>
	<div id="test2" style="width: 600px;height: 400px"></div>
	<div id="test3" style="width: 600px;height: 400px"></div>

	<script>
	$(function () {
        // 初始化echarts

        var myChart =echarts.init(document.getElementById('test1'));
        $.ajax({
            url:"/user/selectSex",
            success:function (data){
                var option={
                    //图标的标题
                    title:{
                        text:'用户男女比例'
                    },
                    //工具栏
                    tooltip:{},
                    //legend传奇	，在统计学中在当前图表中有多少种数据
                    legend:{
                        data:['人数']
                    },
                    //x轴坐标
                    xAxis:{
                        data:["女","男"]
                    },
                    //Y轴坐标不用写，会自动生成
                    yAxis:{},
                    //给x轴坐标进行赋值
                    series:[{
                        //对应的是legend中的数据
                        name:'人数',
                        //定义图表类型，bar桩柱图，
                        type:'bar',
                        //x轴的数据和x轴的坐标
                        data:data,
                    }]
                };
                console.info(data),
                myChart.setOption(option);
                console.info(data)
            }
        })

    })

		$(function () {
		    $.ajax({
				url:"/user/selectDate",
				success(data){
		//初始化echarts
		var myChart2 =echarts.init(document.getElementById('test2'));
		var option2={
		    title:{
		        text:'用户最近三周注册量变化'
			},
			//工具拦
			tooltip:{},
            // legend 传奇 在统计学中 系列  在当前图表中有多少种数据
            legend: {
                data:['注册量']
            },
            // x轴坐标
            xAxis: {
                data: ["前三周","前两周","前一周"]
            },
            // y轴坐标 不用写 自动生成
            yAxis: {},
            // 给x轴赋值坐标值
            series: [{
                // 对应的是legend中的数据
                name: '注册量',
                // 定义图表类型 bar柱状图  line折线图
                type: 'line',
                // x轴的数据 和 x轴坐标
                data: [data.three,data.two,data.one],
            }]
		};
		console.info(data)
		myChart2.setOption(option2);
                }
            })

        })





	$(function () {
		    $.ajax({
				url:"/user/selectCity",
				success:function (data) {


		//初始化echarts
        var myChart3 =echarts.init(document.getElementById('test3'));
        //    配置地区分布图表数据
        var option3 = {
            title : {
                text: '用户地区分布',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:['用户人数']
            },
            visualMap: {
                min: 0,
                max: 25000,
                left: 'left',
                top: 'bottom',
                text:['高','低'],           // 文本，默认为数值文本
                calculable : true
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                left: 'right',
                top: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series : [
                {
                    name: '用户人数',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:data,
                }
            ]
        };
        console.info(data)
        myChart3.setOption(option3);
        console.info(data)

                }
            })

        })
	</script>
	</body>
</html>
